<span page-title>{{ 'New Activation Key' | translate }}</span>

<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2 translate>New Activation Key</h2>
  </header>

  <div data-block="content" class="row">
    <form name="activationKeyForm" class="col-sm-5" novalidate role="form">

      <div bst-form-group label="{{ 'Name' | translate }}">
        <input id="name"
               name="name"
               ng-model="activationKey.name"
               type="text"
               autofocus
               required/>
      </div>

      <div class="checkbox">
        <label>
          <input type="checkbox" name="limit" ng-model="activationKey.unlimited_hosts"/>
          <span translate>Unlimited Hosts</span>
        </label>
      </div>

      <div bst-form-group label="{{ 'Limit' | translate }}" field="max_hosts" ng-hide="activationKey.unlimited_hosts">
        <input id="max_hosts"
               name="max_hosts"
               class="form-control"
               ng-model="activationKey.max_hosts"
               ng-required="!activationKey.unlimited_hosts"
               type="number"
               min="1"
               max="2147483648"/>
      </div>

      <div bst-form-group label="{{ 'Description' | translate }}">
        <textarea id="description"
                  name="description"
                  ng-model="activationKey.description">
        </textarea>
      </div>

      <span bst-feature-flag="lifecycle_environments">
        <div class="form-group">
          <label translate>Environment</label>
          <div path-selector="environments"
                ng-model="activationKey.environment"
                selection-required="false"
                mode="singleSelect">
          </div>
        </div>

        <div bst-form-group label="{{ 'Content View' | translate }}">
          <select ng-hide="contentViews.length === 0 || activationKey.environment === undefined "
                  id="content_view_id"
                  name="content_view_id"
                  ng-model="activationKey.content_view_id"
                  ng-options="contentView.id as contentView.name for contentView in contentViews"
                  autofocus>
          </select>
          <span class="help-block" ng-show="activationKey.environment !== undefined && contentViews.length === 0" translate>
            The selected environment contains no Content Views, please select a different environment.
          </span>
          <span class="help-block" ng-show="activationKey.environment === undefined" translate>
            Please select an environment.
          </span>
        </div>
      </span>

      <div bst-form-buttons
           on-cancel="transitionTo('activation-keys')"
           on-save="save(activationKey)"
           working="working">
      </div>

    </form>
  </div>
</div>
